<template>
  <view class="box br-8">
    <slot name="title">
      <view class="box-title label-color fz-18 mb-12">
        <text>{{ title }}</text>
      </view>
    </slot>

    <template v-for="(v, i) in list" :key="i">
      <view v-if="v.showCuttingLine" class="cutting-line mb-12"></view>
      <view
        class="disFlxJS fz-14 mb-12"
        style="align-items: flex-start"
        @click="setClipboardData(v.value, v.showCopy)"
      >
        <text class="label-color flex-shrink-0 mr-16" :style="{ color: v.labelColor || '#333' }">
          {{ v.label }}:
        </text>
        <view v-if="v.valueType === 'img'">
          <TImage
            v-if="v.value"
            :src="v.value"
            width="56rpx"
            height="44rpx"
            :preview="true"
          ></TImage>
          <text v-else>--</text>
        </view>
        <view
          v-else
          class="disFlxAC"
          :style="{ color: v.valueColor || '#666664', wordBreak: 'break-all' }"
        >
          <template v-if="v.value">
            <text style="text-align: right">{{ v.value }}</text>
            <text v-if="v.showCopy" class="copy-btn flex-shrink-0 ml-8 px-6 br-2 fz-12 br-2">复制</text>
          </template>
          <text v-else-if="!v.operation" style="text-align: right">--</text>
          <TButton
            v-if="v.operation"
            :text="v.operation.text"
            type="none"
            :customStyle="{
              color: '#333333',
              fontSize: '24rpx',
              marginLeft: '24rpx',
              border: 'solid 1px #C8CACC',
            }"
            custom-class="h-24 linh-24 br-12"
            @click="v.operation.callback()"
          />
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import type { PropType } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  export interface ListItem {
    label?: string;
    value?: string;
    labelColor?: string;
    valueColor?: string;
    showCuttingLine?: boolean;
    showCopy?: boolean;
    valueType?: 'text' | 'img';
    /** 操作按钮 */
    operation?: {
      text: string;
      callback: () => void;
    };
  }

  defineProps({
    title: propTypes.string,
    list: {
      type: Array as PropType<ListItem[]>,
      default: () => [],
    },
  });

  // 复制信息
  function setClipboardData(copyText?: string, showCopy?: boolean) {
    if (copyText && showCopy) {
      uni.setClipboardData({
        data: copyText,
        success: function () {
          uni.showToast({
            title: '复制成功',
          });
        },
      });
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    background-color: #fff;
    margin-bottom: 24rpx;
    padding: 24rpx;
    padding-bottom: 0;
    border: 1px solid transparent;
  }
  .label-color {
    color: #333;
  }

  .cutting-line {
    background-color: #dcdee0;
    height: 1px;
  }

  .copy-btn {
    border: 1px solid #999996;
    color: #999996;
  }
</style>
